<template>
  <div class='container'>
     <p>订单列表</p>
         <el-row class='select-input'>
         <el-col :span='6'>
             <span>订单编号：</span>
             <el-input size='small' placeholder='请输入订单编号' v-model='form.order'></el-input>
         </el-col>
         <el-col :span='6'>
             <span>订单类型：</span>
            <el-select v-model="form.mold" size='small' clearable placeholder="请选择">
                <el-option
                  v-for="item in mold"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
         </el-col>
          <el-col :span='6'>
              <span>订单状态：</span>
              <el-select v-model="form.state" size='small' clearable placeholder="请选择">
                <el-option
                  v-for="item in orderState"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-col>
          <el-col :span='6'>
              <span>交易状态：</span>
              <el-select v-model="form.payState" size='small' clearable placeholder="请选择">
                  <el-option
                    v-for="item in payState"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
          </el-col>
     </el-row>
     <el-row class='select-input'>
        <el-col>
    <span class="demonstration">发布时间：</span>
    <el-date-picker
      v-model="time"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    <el-button type='primary' size='large' v-on:click='search'>搜索</el-button>
        </el-col>
     </el-row>
     <el-table
      :data="tableData"
      style="width: 100%"
      height='500'>
      <el-table-column
        prop="baby_id"
        label="宝贝ID">
      </el-table-column>
      <el-table-column
        prop="goods"
        width='300'
        label="产品名">
      </el-table-column>
      <el-table-column
        prop="shop"
        label="店铺">
      </el-table-column>
       <el-table-column
        prop="startTime"
        label="发布日期">
      </el-table-column>
      <el-table-column
        prop="mold"
        label="订单类型">
      </el-table-column>
      <el-table-column
        prop="order_pay"
        label="订单编号">
      </el-table-column>
       <el-table-column
        prop="true_pay"
        label="本金">
      </el-table-column>
      <el-table-column
        prop="end_time"
        label="完成时间">
      </el-table-column>
      <el-table-column
        prop="state"
        label="交易状态">
      </el-table-column>
       <el-table-column
        prop="order_state"
        label="订单状态">
      </el-table-column>
      <el-table-column
        prop="name"
        label="操作">
        <template slot-scope='scope'>
             <el-button
						size="mini"
						type="primary"
						plain
						@click="handleEdit(scope.$index, scope.row)">申诉
				   	</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pageIndex"
      :page-size="params.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="count">
    </el-pagination>
  </div>
   <!-- 弹框 -->
    <el-dialog title="申诉中心" :visible.sync="dialogFormVisible">
  <el-form :model="form" :rules='rules' ref='form'>
    <el-form-item label="填写订单编号" :label-width="formLabelWidth" prop='order'>
      <el-input v-model="form.order" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="填写投诉类型" :label-width="formLabelWidth" prop='type'>
      <el-select v-model="form.type" placeholder="请选择活动区域">
        <el-option label="用户退款问题" value="用户退款问题"></el-option>
        <el-option label="用户评论问题" value="用户评论问题"></el-option>
        <el-option label="用户做任务问题" value="用户做任务问题"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label-width="formLabelWidth" label='填写投诉说明' placeholder='请详尽申诉原因以及建议解决方案，限制在200字以内；' prop='content'>
          <el-input
            :rows="2"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="form.content">
          </el-input>
    </el-form-item>
    <el-form-item label='添加图片证据' :label-width="formLabelWidth">
         <el-upload
            :limit='2'
            multiple
            :before-upload="beforeAvatarUpload"
            accept="image/gif, image/jpg,images/png,images/bmp"
            class="upload-demo"
            action="api/upload/upload"
            :on-remove="handleRemove"
            :file-list="fileList2"
            :on-success='handleSuccess'
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit('form')">提交</el-button>
  </div>
</el-dialog>
  </div>
</template>
<script>
import {orderList,complaint} from '@/pages/api/index.js'
export default {
   data(){
      return {
        tableData:[],
         mold: [{
          value: '1',
          label: '原价单'
        }, {
          value: '2',
          label: '评价单'
        }, {
          value: '3',
          label: '优惠券单'
        }],
        orderState:[{    //订单状态
           vlaue:'WAIT_BUYER_PAY',
           label:'等待买家付款'
        },{
           value:'SELLER_CONSIGNED_PART',
           label:'卖家部分发货'
        },{
           value:"WAIT_SELLER_SEND_GOODS",
           label:'等待卖家发货'
        },{
           value:'WAIT_BUYER_CONFIRM_GOODS',
           label:'等待买家确认收货'
        },{
           value:'TRADE_BUYER_SIGNED',
           label:'买家已签收'
        },{
           value:'TRADE_FINISHED',
           label:'交易成功'
        },{
           value:'TRADE_CLOSED',
           label:'付款以后用户退款成功，交易自动关闭'
        },{
           value:' TRADE_CLOSED_BY_TAOBAO',
           label:'付款以前，卖家或买家主动关闭交易'
        },{
           value:'PAY_PENDING',
           label:'国际信用卡支付付款确认中'
        }],
        payState:[{ // 交易状态
           value:1,
           label:'进行中'
        },{
           value:2,
           label:'已完成'
        },{
           value:3,
           label:'带提现'
        },{
           value:4,
           label:'取消'
        },{
           value:5,
           label:'投诉中'
        }],
          currentPage4: 4,
          time:[],           //发布时间
          params:{
             order:'',         //订单编号
             mold:"",          //订单类型
             state:'',         //订单状态
             payState:"",     //交易状态
             startTime:'',     //开始时间
             end_time:'',      //结束时间
          },
          count:0,
          dialogFormVisible:false,
          rules:{
          order: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ],
          type: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          content: [
            { required: true, message: '请输入投诉说明', trigger: 'blur' }
          ],
        },
        formLabelWidth: '120px',
        fileList2:[],
        form: {
              order: '',       //订单编号
              type: '',        //任务类型
              content: '',     //投诉说明
              imgs:'',         //图片id集合
            },
            succList:[],             //上传成功图片的集合
        removeList:[],
        imgData:{
          //  accept: 'image/gif, image/bmp, image/png, image/jpg',
           accept:['.gif','.bmp','.png','.jpg']
         }
      }
   },
   methods:{
     //限制图片格式 accept="image/gif,image/jpg,image/png,image/bmp"
      beforeAvatarUpload(file) {
        var fType = file.name.substr(file.name.lastIndexOf("."))
          let type = file.type
          if(this.imgData.accept.indexOf(fType) == -1){
              this.$message.warning('不能使用除了gif，bmp，png，jpg之外的格式')
              return false
          }
      },
     search(){
        if(this.time !== []) {
           this.params.startTime = this.time[0]
           this.params.end_time = this.time[1]
        }
        // this.copy = JSON.parse(JSON.stringify(this.form))
         orderList(this.params).then(res=>{
            console.log(res,'res')
            if(res.code == 0){
                 res.data.data.forEach(item => {
                      switch(item.mold){
                          case 1:
                             item.mold = '原价单'
                             break
                          case 2:
                             item.mold = '评价单'
                             break
                          case 3:
                             item.mold = '优惠券单'
                             break
                      }
                      switch(item.state){
                          case 1:
                             item.state = '进行中'
                             break;
                          case 2:
                             item.state = '已完成'
                             break;
                          case 3:
                             item.state = '带提现'
                             break;
                          case 4:
                             item.state = '取消'
                             break;
                          case 5:
                             item.state = '投诉中'
                             break;
                      }
                      switch(item.order_state){
                          case 'WAIT_BUYER_PAY':
                             item.order_state = '等待买家付款'
                             break;
                          case 'SELLER_CONSIGNED_PART':
                             item.order_state = '卖家部分发货'
                             break;
                          case 'WAIT_SELLER_SEND_GOODS':
                             item.order_state = '等待卖家发货'
                             break;
                          case 'WAIT_BUYER_CONFIRM_GOODS':
                             item.order_state = '等待买家确认收货'
                             break;
                          case 'TRADE_BUYER_SIGNED':
                             item.order_state = '买家已签收'
                             break;
                          case 'TRADE_FINISHED':
                             item.order_state = '交易成功'
                             break;
                          case 'TRADE_CLOSED':
                             item.order_state = '付款以后用户退款成功，交易自动关闭'
                             break;
                          case 'TRADE_CLOSED_BY_TAOBAO':
                             item.order_state = '付款以前，卖家或买家主动关闭交易'
                             break;
                          case 'PAY_PENDING':
                             item.order_state = '国际信用卡支付付款确认中'
                             break;
                      }
                 })
                 this.tableData = res.data.data
                 this.count = res.data.count
            }else{
               this.$message.warning(res.msg)
            }
         })
      },
      handleEdit(index,row){
           console.log(row)
           this.form.order = row.order_pay
           this.dialogFormVisible = true
      },

       /* 文件上传成功时的钩子 */
      handleSuccess(response){
        this.succList.push(response.data.id)
      },
      /* 文件移除时的钩子 */
      handleRemove(file, fileList) {
        this.removeList.push(file.response.data.id)
      },
      /* 提交申诉 */
      submit(formName){
        this.$refs[formName].validate(valid=>{
           if(valid){
            var arr1 = this.succList //数组A
            var arr2 = this.removeList//数组B
            var temp = []; //临时数组1
            var temparray = [];//临时数组2
            for (var i = 0; i < arr2.length; i++) {
            temp[arr2[i]] = true;//巧妙地方：把数组B的值当成临时数组1的键并赋值为真
            };
            for (var i = 0; i < arr1.length; i++) {
            if (!temp[arr1[i]]) {
            temparray.push(arr1[i]);//巧妙地方：同时把数组A的值当成临时数组1的键并判断是否为真，如果不为真说明没重复，就合并到一个新数组里，这样就可以得到一个全新并无重复的数组
            } ;
            };
            this.form.imgs = temparray.join()
            if(this.form.imgs == ''){
                 this.$message.error('请上传图片')
                 return
            }else{
              complaint(this.form).then(res=>{
                    if(res.code == 0){
                        this.fileList2 = []
                        this.form = {}
                        this.succList = []
                        this.removeList = []
                        this.$message.success('已提交')
                        this.dialogFormVisible = false
                    }else{
                         this.$message.error(res.msg)
                    }
              })
            }
           }else{
               return
           }
        })
      },
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.params.pageSize = val
        this.search()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.params.pageIndex = val
        this.search()
      }
   },
   created(){
      this.search()
   }
}
</script>
<style lang='scss' scoped>
 .container{
    width:100%;
    // height:100%;
    background-color: #fff;
    padding:0 20px;
    box-sizing:border-box;
    >p{
       width:100%;
       height:80px;
       line-height:80px;
       border-bottom:1px solid #ebeef5;
       font-size:26px;
        font-weight:bold;
    }
        .select-input{
        width:100%;
        margin-top:30px;
        span{
           margin-right:20px;
        }
        .el-input{
           width:200px;
        }
        .el-button{
           margin-left:20px;
        }
    }
    .el-table{
      margin-top:30px;
    }
    /deep/ .el-table td,
    /deep/ .el-table th{
        text-align:center;
    }
    .block{
        widows: 100%;
        height:60px;
        background-color: #fff;
        display:flex;
        justify-content:center;
        align-items:center;
    }
 }
</style>

